<div class="d-flex justify-content-center">
    <form [formGroup]="form" (ngSubmit)="submit()" novalidate class="p-3">
        <h2>Master Password Setup</h2>
        <fieldset [disabled]="(signingIn$ | async) || false">
            <div class="form-row">
                <div class="col-md-6">
                    <input
                        #passwordRef [ngClass]="{'is-invalid': password.dirty && password.invalid}" class="form-control form-control-lg" formControlName="password"
                        placeholder="Password"
                        type="password"
                    >
                </div>
                <div class="col-md-6">
                    <input
                        [ngClass]="{'is-invalid': passwordConfirm.dirty && passwordConfirm.invalid}" class="form-control form-control-lg" formControlName="passwordConfirm"
                        placeholder="Password Confirm"
                        type="password"
                    >
                    <div class="invalid-feedback" *ngIf="passwordConfirm.invalid && passwordConfirm.errors?.mismatch">
                        Passwords don't match.
                    </div>
                </div>
            </div>
            <div class="text-muted">
                The app uses this password to encrypt all the sensitive data to be stored in the
                <a (click)="$event.preventDefault(); openSettingsFolder()" href="{{ userDataDir }}">
                    settings folder
                </a>.
                All the files being produced and stored by the app listed in
                the <a (click)="$event.preventDefault(); openFaq()" href="{{ PACKAGE_GITHUB_PROJECT_URL }}/wiki/FAQ">FAQ</a>.
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit" [disabled]="form.invalid">
                <i class="fa fa-spinner fa-pulse fa-fw" *ngIf="signingIn$ | async"></i>
                Submit
            </button>
            <div class="custom-control custom-switch float-right">
                <input
                    class="custom-control-input"
                    formControlName="savePassword"
                    id="savePasswordCheckbox"
                    type="checkbox"
                >
                <label class="custom-control-label" for="savePasswordCheckbox">
                    <electron-mail-save-password-label
                        [savePassword]="savePassword.value"
                    ></electron-mail-save-password-label>
                </label>
            </div>
        </fieldset>
    </form>
</div>
